<!-- 功能：存储池管理 | 作者：menghao.yan | 邮箱：yxs2615@163.com | 时间：2023年08月15日 10:11:21 -->
<template>
  <a-tabs v-model:activeKey="activeKey" type="card" class="y-tabs">
    <a-tab-pane key="cunChuChi" tab="存储池">
      <a-row align="middle">
        <a-col :span="16">
          <a-button type="link" class="y-btn" @click="openChuangJianCunChuChiModal">
            <template #icon>
              <plus-outlined />
            </template>
            创建存储池
          </a-button>
          <!-- 弹窗 - 创建存储池 -->
          <chuangJianCunChuChiModal v-model:visible="visibleChuangJianCunChuChiModal"></chuangJianCunChuChiModal>
        </a-col>
        <a-col :span="8">
          <a-input v-model:value="searchValueChuangJianCunChuChi">
            <template #addonBefore>
              <search-outlined /> 搜索:
            </template>
          </a-input>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-card>
            <a-table bordered :data-source="dataSourceChuangJianCunChuChi" :columns="columnsChuangJianCunChuChi" class="y-table" :pagination="paginationChuangJianCunChuChi"></a-table>
          </a-card>
        </a-col>
      </a-row>
    </a-tab-pane>

    <a-tab-pane key="ziJingJianGuanLi" tab="自精简管理">
      <a-row align="middle">
        <a-col :span="16">
          <a-button type="link" class="y-btn" @click="openChuangJianZiJingJianChiModal">
            <template #icon>
              <plus-outlined />
            </template>
            创建自精简池
          </a-button>
          <!-- 弹窗 - 创建自精简池 -->
          <chuangJianZiJingJianChiModal v-model:visible="visibleChuangJianZiJingJianChiModal"></chuangJianZiJingJianChiModal>
        </a-col>
        <a-col :span="8">
          <a-input v-model:value="searchValueZiJingJianGuanLi">
            <template #addonBefore>
              <search-outlined /> 搜索:
            </template>
          </a-input>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-card>
            <a-table bordered :data-source="dataSourceZiJingJianGuanLi" :columns="columnsZiJingJianGuanLi" class="y-table" :pagination="paginationZiJingJianGuanLi"></a-table>
          </a-card>
        </a-col>
      </a-row>
    </a-tab-pane>

    <a-tab-pane key="lun" tab="LUN">
      <a-row align="middle">
        <a-col :span="24">
          <a-space>
            <a-button type="link" class="y-btn" @click="openChuangJianNasLunModal">
              <template #icon>
                <plus-outlined />
              </template>
              创建NASLUN
            </a-button>
            <!-- 弹窗 - 创建NASLUN -->
            <chuangJianNasLunModal v-model:visible="visibleChuangJianNasLunModal"></chuangJianNasLunModal>
            <a-button type="link" class="y-btn" @click="openChuangJianSanLunModal">
              <template #icon>
                <plus-outlined />
              </template>
              创建SANLUN
            </a-button>
            <chuangJianSanLunModal v-model:visible="visibleChuangJianSanLunModal"></chuangJianSanLunModal>
            <!-- 弹窗 - 创建SANLUN -->
            <a-button type="link" class="y-btn" @click="openShengZhuModal">
              <template #icon>
                <arrow-up-outlined />
              </template>
              升主
            </a-button>
            <!-- 弹窗 - 升主 -->
            <a-button type="link" class="y-btn" @click="openJiangBeiModal">
              <template #icon>
                <arrow-down-outlined />
              </template>
              降备
            </a-button>
            <!-- 弹窗 - 降备 -->
          </a-space>
        </a-col>
      </a-row>

      <a-card>
        <template #title><span class="y-cunChuChiGuanLi-title">NSALUN</span></template>
        <a-row align="middle">
          <a-col :span="16">
            <a-space>
              <a-button type="link" class="y-btn" @click="openZiYuanBangDingModal">
                <template #icon>
                  <swap-outlined />
                </template>
                资源绑定
              </a-button>
              <!-- 弹窗 - 资源绑定 -->
              <ziYuanBangDingModal  v-model:visible="visibleZiYuanBangDingModal"></ziYuanBangDingModal>
              <a-button type="link" class="y-btn" @click="openShanChuBangDingModal">
                <template #icon>
                  <delete-outlined />
                </template>
                删除绑定
              </a-button>
              <!-- 弹窗 - 删除绑定 -->
            </a-space>
          </a-col>
          <a-col :span="8">
            <a-input v-model:value="searchValueNasLun">
              <template #addonBefore>
                <search-outlined /> 搜索:
              </template>
            </a-input>
          </a-col>
        </a-row>
        <a-table bordered :data-source="dataSourceNasLun" :columns="columnsNasLun" class="y-table" :pagination="paginationNasLun"></a-table>
      </a-card>

      <a-card>
        <template #title><span class="y-cunChuChiGuanLi-title">SANLUN</span></template>
        <a-row align="middle" justify="end">
          <a-col :span="8">
            <a-input v-model:value="searchValueSanLun">
              <template #addonBefore>
                <search-outlined /> 搜索:
              </template>
            </a-input>
          </a-col>
        </a-row>
        <a-table bordered :data-source="dataSourceSanLun" :columns="columnsSanLun" class="y-table" :pagination="paginationSanLun"></a-table>
      </a-card>
    </a-tab-pane>
  </a-tabs>
</template>

<script setup>
import chuangJianCunChuChiModal from './modal/chuangJianCunChuChiModal.vue'
import chuangJianZiJingJianChiModal from './modal/chuangJianZiJingJianChiModal.vue'
import chuangJianNasLunModal from './modal/chuangJianNasLunModal.vue'
import chuangJianSanLunModal from './modal/chuangJianSanLunModal.vue'
import ziYuanBangDingModal from './modal/ziYuanBangDingModal.vue'
const activeKey = ref('cunChuChi')

const visibleChuangJianCunChuChiModal = ref(false)

const openChuangJianCunChuChiModal = () => {
  visibleChuangJianCunChuChiModal.value = true
}

const searchValueChuangJianCunChuChi = ref('')

// 表格列
const columnsChuangJianCunChuChi = ref([
  {
    title: '存储池',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
    sorter: {
      compare: (a, b) => a.name.localeCompare(b.name),
      multiple: 1
    }
  },
  {
    title: 'RAID组',
    dataIndex: 'raidZu',
    key: 'raidZu',
    align: 'center',
    sorter: {
      compare: (a, b) => a.raidZu.localeCompare(b.raidZu),
      multiple: 2
    }
  },
  {
    title: '存储池容量',
    dataIndex: 'cunChuChiRongLiang',
    key: 'cunChuChiRongLiang',
    align: 'center',
    sorter: {
      compare: (a, b) => a.cunChuChiRongLiang.localeCompare(b.cunChuChiRongLiang),
      multiple: 3
    }
  },
  {
    title: '未分配空间',
    dataIndex: 'weiFenPeiKongJian',
    key: 'weiFenPeiKongJian',
    align: 'center',
    sorter: {
      compare: (a, b) => a.weiFenPeiKongJian.localeCompare(b.weiFenPeiKongJian),
      multiple: 4
    }
  },
  {
    title: '所属控制器',
    dataIndex: 'suoShuKongZhiQi',
    key: 'suoShuKongZhiQi',
    align: 'center',
    sorter: {
      compare: (a, b) => a.suoShuKongZhiQi.localeCompare(b.suoShuKongZhiQi),
      multiple: 5
    }
  },
  {
    title: '备注',
    dataIndex: 'beiZhu',
    key: 'beiZhu',
    align: 'center',
    sorter: {
      compare: (a, b) => a.beiZhu.localeCompare(b.beiZhu),
      multiple: 6
    }
  }
])

// 表格数据
const dataSourceChuangJianCunChuChi = ref([
  {
    key: 1,
    name: 'xx',
    raidZu: 'ww',
    cunChuChiRongLiang: '1000',
    weiFenPeiKongJian: '1000',
    suoShuKongZhiQi: '1000',
    beiZhu: '1000'
  },
  {
    key: 2,
    name: 'xx',
    raidZu: 'ww',
    cunChuChiRongLiang: '1000',
    weiFenPeiKongJian: '1000',
    suoShuKongZhiQi: '1000',
    beiZhu: '1000'
  }
])

// 分页
const paginationChuangJianCunChuChi = {
  current: 1,
  pageSize: 10,
  showQuickJumper: true,
  showSizeChanger: true,
  total: 0,
  showTotal: (total, range) => {
    return `${range[0]}-${range[1]} 共 ${total} 条数据`
  },
  onChange: (page, pageSize) => {
    console.log('存储池管理分页改变>>', page, pageSize)
  }
}

// -----

const visibleChuangJianZiJingJianChiModal = ref(false)

const openChuangJianZiJingJianChiModal = () => {
  visibleChuangJianZiJingJianChiModal.value = true
}

const searchValueZiJingJianGuanLi = ref('')

// 表格列
const columnsZiJingJianGuanLi = ref([
  {
    title: '自精简池',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
    sorter: {
      compare: (a, b) => a.name.localeCompare(b.name),
      multiple: 1
    }
  },
  {
    title: '存储池',
    dataIndex: 'cunChuChi',
    key: 'cunChuChi',
    align: 'center',
    sorter: {
      compare: (a, b) => a.cunChuChi.localeCompare(b.cunChuChi),
      multiple: 2
    }
  },
  {
    title: '自精简池大小',
    dataIndex: 'ziJingJianChiDaXiao',
    key: 'ziJingJianChiDaXiao',
    align: 'center',
    sorter: {
      compare: (a, b) => a.ziJingJianChiDaXiao.localeCompare(b.ziJingJianChiDaXiao),
      multiple: 3
    }
  },
  {
    title: '未分配空间',
    dataIndex: 'weiFenPeiKongJian',
    key: 'weiFenPeiKongJian',
    align: 'center',
    sorter: {
      compare: (a, b) => a.weiFenPeiKongJian.localeCompare(b.weiFenPeiKongJian),
      multiple: 4
    }
  },
  {
    title: '空间报警大小',
    dataIndex: 'kongJianBaoJingDaXiao',
    key: 'kongJianBaoJingDaXiao',
    align: 'center',
    sorter: {
      compare: (a, b) => a.kongJianBaoJingDaXiao.localeCompare(b.kongJianBaoJingDaXiao),
      multiple: 5
    }
  },
  {
    title: '报警状态',
    dataIndex: 'status',
    key: 'status',
    align: 'center',
    sorter: {
      compare: (a, b) => a.status.localeCompare(b.status),
      multiple: 6
    }
  }
])

// 表格数据
const dataSourceZiJingJianGuanLi = ref([
  {
    key: '1',
    name: '1',
    cunChuChi: 'xx',
    ziJingJianChiDaXiao: '1',
    weiFenPeiKongJian: '1',
    kongJianBaoJingDaXiao: '1',
    status: '1'
  },
  {
    key: '2',
    name: '2',
    cunChuChi: 'xx',
    ziJingJianChiDaXiao: '2',
    weiFenPeiKongJian: '2',
    kongJianBaoJingDaXiao: '2',
    status: '2'
  }
])

// 分页
const paginationZiJingJianGuanLi = {
  current: 1,
  pageSize: 10,
  showQuickJumper: true,
  showSizeChanger: true,
  total: 0,
  showTotal: (total, range) => {
    return `${range[0]}-${range[1]} 共 ${total} 条数据`
  },
  onChange: (page, pageSize) => {
    console.log('自精简管理分页改变>>', page, pageSize)
  }
}

// -- NasLun

//创建NASLUN
const visibleChuangJianNasLunModal = ref(false)

const openChuangJianNasLunModal = () => {
  visibleChuangJianNasLunModal.value = true
}

//创建SANLUN
const visibleChuangJianSanLunModal = ref(false)

const openChuangJianSanLunModal = () => {
  visibleChuangJianSanLunModal.value = true
}

//升主
const visibleShengZhuModal = ref(false)

const openShengZhuModal = () => {
  visibleShengZhuModal.value = true
}

//降备
const visibleJiangBeiModal = ref(false)

const openJiangBeiModal = () => {
  visibleJiangBeiModal.value = true
}

//资源绑定
const visibleZiYuanBangDingModal = ref(false)

const openZiYuanBangDingModal = () => {
  visibleZiYuanBangDingModal.value = true
}

//删除绑定
const visibleShanChuBangDingModal = ref(false)

const openShanChuBangDingModal = () => {
  visibleShanChuBangDingModal.value = true
}

const searchValueNasLun = ref('')

// 表格列
const columnsNasLun = ref([
  {
    title: 'LUN名称',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
    sorter: {
      compare: (a, b) => a.name.localeCompare(b.name),
      multiple: 1
    }
  },
  {
    title: '所在存储池',
    dataIndex: 'suoZaiCunChuChi',
    key: 'suoZaiCunChuChi',
    align: 'center',
    sorter: {
      compare: (a, b) => a.suoZaiCunChuChi.localeCompare(b.suoZaiCunChuChi),
      multiple: 2
    }
  },
  {
    title: '容量/可用',
    dataIndex: 'rongLiang',
    key: 'rongLiang',
    align: 'center',
    sorter: {
      compare: (a, b) => a.rongLiang.localeCompare(b.rongLiang),
      multiple: 3
    }
  },
  {
    title: '挂载',
    dataIndex: 'guaZai',
    key: 'guaZai',
    align: 'center',
    sorter: {
      compare: (a, b) => a.guaZai.localeCompare(b.guaZai),
      multiple: 4
    }
  }
])

// 表格数据
const dataSourceNasLun = ref([
  {
    key: '1',
    name: 'lun1',
    suoZaiCunChuChi: 'pool1',
    rongLiang: '100G',
    guaZai: '已挂载'
  },
  {
    key: '2',
    name: 'lun2',
    suoZaiCunChuChi: 'pool2',
    rongLiang: '200G',
    guaZai: '未挂载'
  }
])

// 分页
const paginationNasLun = {
  current: 1,
  pageSize: 10,
  showQuickJumper: true,
  showSizeChanger: true,
  total: 0,
  showTotal: (total, range) => {
    return `${range[0]}-${range[1]} 共 ${total} 条数据`
  },
  onChange: (page, pageSize) => {
    console.log('NASLUN管理分页改变>>', page, pageSize)
  }
}

// -- SANLUN

const searchValueSanLun = ref('')

// 表格列
const columnsSanLun = ref([
  {
    title: 'LUN名称',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
    sorter: {
      compare: (a, b) => a.name.localeCompare(b.name),
      multiple: 1
    }
  },
  {
    title: '所在存储池',
    dataIndex: 'suoZaiCunChuChi',
    key: 'suoZaiCunChuChi',
    align: 'center',
    sorter: {
      compare: (a, b) => a.suoZaiCunChuChi.localeCompare(b.suoZaiCunChuChi),
      multiple: 2
    }
  },
  {
    title: '容量',
    dataIndex: 'rongLiang',
    key: 'rongLiang',
    align: 'center',
    sorter: {
      compare: (a, b) => a.rongLiang.localeCompare(b.rongLiang),
      multiple: 3
    }
  },
  {
    title: 'Target',
    dataIndex: 'target',
    key: 'target',
    align: 'center',
    sorter: {
      compare: (a, b) => a.target.localeCompare(b.target),
      multiple: 4
    }
  },
  {
    title: '时间',
    dataIndex: 'shiJian',
    key: 'shiJian',
    align: 'center',
    sorter: {
      compare: (a, b) => a.shiJian.localeCompare(b.shiJian),
      multiple: 5
    }
  },
  {
    title: '快照策略',
    dataIndex: 'kuaiZhaoCelue',
    key: 'kuaiZhaoCelue',
    align: 'center',
    sorter: {
      compare: (a, b) => a.kuaiZhaoCelue.localeCompare(b.kuaiZhaoCelue),
      multiple: 6
    }
  }
])

// 表格数据
const dataSourceSanLun = ref([
  {
    key: '1',
    name: 'test1',
    suoZaiCunChuChi: 'test1',
    rongLiang: 'test1',
    target: 'test1',
    shiJian: 'test1',
    kuaiZhaoCelue: 'test1'
  },
  {
    key: '2',
    name: 'test2',
    suoZaiCunChuChi: 'test2',
    rongLiang: 'test2',
    target: 'test2',
    shiJian: 'test2',
    kuaiZhaoCelue: 'test2'
  }
])

// 分页
const paginationSanLun = {
  current: 1,
  pageSize: 10,
  showQuickJumper: true,
  showSizeChanger: true,
  total: 0,
  showTotal: (total, range) => {
    return `${range[0]}-${range[1]} 共 ${total} 条数据`
  },
  onChange: (page, pageSize) => {
    console.log('SANLUn管理分页改变>>', page, pageSize)
  }
}
</script>

<style scoped lang='scss'>
.ant-row {
  margin-bottom: 10px;
}
.y-cunChuChiGuanLi-title {
  font-weight: bold;
  font-size: 16px;
}
.ant-card {
  margin-bottom: 10px;
}
</style>